import { PlusOutlined } from '@ant-design/icons';
import { Button, Divider, message, Input, Drawer } from 'antd';
import React, { useState, useRef } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';
import OrderCommon from '@/pages/OrderCommon';
import { queryRule, getPayOrder } from './service';

const TableList = () => {
  const [createModalVisible, handleModalVisible] = useState(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState(false);
  const [stepFormValues, setStepFormValues] = useState({});
  const [payOrderValues, setPayOrderValues] = useState({});
  const [order, setOrder] = useState(false);
  const actionRef = useRef();
  const [count, setCount] = useState();
  const [selectedRowsState, setSelectedRows] = useState([]);
  const handlePay = (params) => {
    getPayOrder(params).then((res) => {
      const { code, data } = res;
      code === 0 ? (setPayOrderValues(data), setOrder(true)) : null;
    });
  };
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      render: (dom, entity) => {
        return <a>{dom}</a>;
      },
    },
    {
      title: '实时金额',
      dataIndex: 'amount',
      hideInSearch: true,
    },
    {
      title: '类型',
      dataIndex: 'type',
      hideInForm: true,
      valueEnum: {
        1: {
          text: '消费',
          status: 'Processing',
        },
        2: {
          text: '充值',
          status: 'Success',
        },
      },
    },
    {
      title: '开始时间',
      dataIndex: 'startDate',
      valueType: 'date',
      hideInForm: true,
    },
    {
      title: '结束时间',
      dataIndex: 'endDate',
      valueType: 'date',
      hideInForm: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          onClick={() => {
            handlePay(record.billId);
            setOrder(true);
          }}
        >
          查看
        </a>,
      ],
    },
  ];
  return (
    <PageContainer>
      <ProTable
        headerTitle="运行时任务列表"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        bordered
        request={(params, sorter, filter) => queryRule({ ...params, sorter, filter })}
        postData={(payload) => {
          const { list, total } = payload;
          setCount(total);
          return list;
        }}
        columns={columns}
        pagination={{
          defaultPageSize: 30,
          showSizeChanger: false,
          showTitle: false,
          total: count,
          showTotal: (total) => `共${total}条`,
        }}
      />

      <CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
        <ProTable
          onSubmit={async (value) => {
            const success = await handleAdd(value);

            if (success) {
              handleModalVisible(false);

              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
          rowKey="id"
          bordered
          type="form"
          columns={columns}
        />
      </CreateForm>
      <CreateForm width={1300} onCancel={() => setOrder(false)} modalVisible={order}>
        <OrderCommon
          payOrderValues={payOrderValues}
          refund={false}
          // refund={
          //   details
          //     ? details.status === 0 || details.status === 1 || details.status === 3
          //       ? null
          //       : payRef
          //     : null
          // }
        />
      </CreateForm>
    </PageContainer>
  );
};

export default TableList;
